import FormStepHeader from './form-step-header.vue'

export default {
  name: 'VueFormSteps',
  componentName: 'VueFormSteps',
  components: {
    FormStepHeader
  },
  data() {
    return {
      steps: [],
      active: 1
    }
  },
  provide() {
    return {
      root: this
    }
  },
  watch: {
    active: {
      handler(active) {
        this.$emit('change', active)
      },
      immediate: true
    }
  },
  computed: {
    nextDisabled() {
      return !(this.active < this.steps.length)
    },
    preDisabled() {
      return !(this.active > 1)
    }
  },
  methods: {
    next() {
      if (this.active++ > this.steps.length) this.active = 1
    },
    pre() {
      if (this.active-- < 2) this.active = 1
    },
    setActive(active) {
      this.active = parseInt(active)
    }
  },
  render(h) {
    const next = (
      <el-button
        onClick={this.next}
        type={'primary'}
        size={'mini'}
        disabled={this.nextDisabled}
        style="margin-top: 12px"
      >
        下一步
      </el-button>
    )
    const pre = (
      <el-button
        size={'mini'}
        onClick={this.pre}
        disabled={this.preDisabled}
        style="margin-top: 12px"
      >
        上一步
      </el-button>
    )
    return (
      <div class={'vue-form-steps'}>
        <form-step-header
          steps={this.steps}
          active={this.active}
        ></form-step-header>
        {this.$slots.default}
        {this.$scopedSlots.footer
          ? this.$scopedSlots.footer({
              next: this.next,
              pre: this.pre,
              active: this.active,
              setActive: this.setActive,
              preDisabled: this.preDisabled,
              nextDisabled: this.nextDisabled
            })
          : [pre, next]}
      </div>
    )
  }
}
